<template>
  <div class="w-100 h-100 flex body">
    <div class="w-98 head-Top">
      <div class="userNmae">基本信息</div>
      <div class="head-Top-Oen">
        <div class="Size flexLeft">登录IP：</div>
        <div class="head-header">
          <el-input
            v-model="from.name"
            class="ipLink"
            placeholder="请输入登录IP"
            size="mini"
          ></el-input>
        </div>
      </div>
      <div class="head-Top-Oen">
        <div class="Size flexLeft">IP所在地：</div>
        <div class="head-header">
          <el-input
            v-model="from.ipDay"
            class="ipLink"
            placeholder="请输入IP所在地"
            size="mini"
          ></el-input>
        </div>
      </div>
      <div class="head-Top-Oen">
        <div class="Size flexLeft">登录时间：</div>
        <div class="head-header">
          <el-input
            v-model="from.time"
            class="ipLink"
            placeholder="请输入登录时间"
            size="mini"
          ></el-input>
        </div>
      </div>
      <div class="head-Top-Oen">
        <div class="Size flexLeft">商户帐户：</div>
        <div class="head-header">
          <el-input
            v-model="from.merchant"
            class="ipLink"
            placeholder="请输入商户帐户"
            size="mini"
          ></el-input>
        </div>
      </div>
      <div class="head-Top-Oen">
        <div class="Size flexLeft">商户ID：</div>
        <div class="head-header">
          <el-input
            v-model="from.merchantId"
            class="ipLink"
            placeholder="请输入商户ID"
            size="mini"
          ></el-input>
        </div>
      </div>
      <div class="head-Top-Oen">
        <div class="Size flexLeft">联系人：</div>
        <div class="head-header">
          <el-input
            v-model="from.contacts"
            class="ipLink"
            placeholder="请输入联系人"
            size="mini"
          ></el-input>
        </div>
      </div>
      <div class="head-Top-Oen">
        <div class="Size flexLeft">身份证号：</div>
        <div class="head-header">
          <el-input
            v-model="from.idNum"
            class="ipLink"
            placeholder="请输入身份证号"
            size="mini"
          ></el-input>
        </div>
      </div>
      <div class="head-Top-Oen">
        <div class="Size flexLeft">手机号码：</div>
        <div class="head-header">
          <el-input
            v-model="from.phone"
            class="ipLink"
            placeholder="请输入手机号码"
            size="mini"
          ></el-input>
        </div>
      </div>
      <div class="head-Top-Oen">
        <div class="Size flexLeft">联系地址：</div>
        <div class="head-header">
          <el-input
            v-model="from.address"
            class="ipLink"
            placeholder="请输入联系地址"
            size="mini"
          ></el-input>
        </div>
      </div>
      <div class="userNmae">
        <el-button
          icon="el-icon-lock"
          size="mini"
          type="primary"
          @click="open(4)"
          >修改登录密码
        </el-button>
        <el-button
          icon="el-icon-lock"
          size="mini"
          type="primary"
          @click="authenTicAtion(5)"
          >修改认证密码
        </el-button>
      </div>
      <!--      <div class="head-Top-Oen-1 flexLeft">-->
      <!--        <div class="Size-One">API白名单：</div>-->
      <!--        <div>-->
      <!--          <el-input-->
      <!--            v-model="from.textarea"-->
      <!--            :rows="3"-->
      <!--            class="ipLink"-->
      <!--            placeholder="允许交易的IP白名单，多个用英文豆号分隔"-->
      <!--            size="mini"-->
      <!--            type="textarea"-->
      <!--          ></el-input>-->
      <!--        </div>-->
      <!--        <div class="white-list">-->
      <!--          <el-button icon="el-icon-circle-check" size="mini" type="primary"-->
      <!--            >设置白名单-->
      <!--          </el-button>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="cheCk flexLeft">
        <div class="h-100 flexLeft white-list-top">帐户状态:</div>
        <div>
          <el-radio-group v-model="radio">
            <el-radio :disabled="radio !== '1'" label="1">开启</el-radio>
            <el-radio :disabled="radio !== '2'" label="2">禁止</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="cheCk flexLeft">
        <div class="h-100 flexLeft white-list-top">认证状态:</div>
        <div>
          <el-radio-group v-model="authentication">
            <el-radio :disabled="authentication !== '1'" label="1"
              >初始化
            </el-radio>
            <el-radio :disabled="authentication !== '2'" label="2"
              >认证
            </el-radio>
            <el-radio :disabled="authentication !== '3'" label="3"
              >未认证
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="cheCk flexLeft">
        <div class="h-100 flexLeft white-list-top">收款签约:</div>
        <div>
          <el-radio-group v-model="Signing">
            <el-radio :disabled="Signing !== '1'" label="1">签约</el-radio>
            <el-radio :disabled="Signing !== '2'" label="2">未签约</el-radio>
            <el-radio :disabled="Signing !== '3'" label="3"
              >等待提交资料
            </el-radio>
          </el-radio-group>
        </div>
        <div class="mok-Left">
          <el-popover
            content="开发中..."
            placement="right"
            trigger="click"
            width="200"
          >
            <el-button
              slot="reference"
              icon="el-icon-search"
              size="mini"
              type="primary"
              >查看收款签约信息
            </el-button>
          </el-popover>
        </div>
      </div>
      <!--      <div class="cheCk flexLeft">-->
      <!--        <div class="h-100 flexLeft white-list-top">代付状态:</div>-->
      <!--        <div>-->
      <!--          <el-radio v-model="behalf" disabled label="1">签约</el-radio>-->
      <!--          <el-radio v-model="behalf" disabled label="2">未签约</el-radio>-->
      <!--          <el-radio v-model="behalf" disabled label="3">关闭签约</el-radio>-->
      <!--          <el-radio v-model="behalf" label="4">等待提交资料</el-radio>-->
      <!--        </div>-->
      <!--        <div class="mok-Left">-->
      <!--          <el-popover-->
      <!--            content="开发中..."-->
      <!--            placement="right"-->
      <!--            trigger="click"-->
      <!--            width="200"-->
      <!--          >-->
      <!--            <el-button-->
      <!--              slot="reference"-->
      <!--              icon="el-icon-search"-->
      <!--              size="mini"-->
      <!--              type="primary"-->
      <!--              >查看代付签约信息-->
      <!--            </el-button>-->
      <!--          </el-popover>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="cheCk flexLeft">
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="apiClick(1)"
          >查看APIKEY
        </el-button>
        <el-button
          icon="el-icon-upload2"
          size="mini"
          type="primary"
          @click="apiClick(2)"
          >上传商户公钥
        </el-button>
        <el-button
          icon="el-icon-edit"
          size="mini"
          type="primary"
          @click="apiClick(3)"
          >公私钥生成器
        </el-button>
      </div>
      <div class="cheCk flexLeft From">DEMO及文档</div>
      <div class="DOMri">
        <el-link icon="el-icon-search">GO DEMO</el-link>
        <el-link class="Right-Left" icon="el-icon-search">JAVA DEMO</el-link>
        <el-link class="Right-Left" icon="el-icon-search ">PHP DEMO</el-link>
        <el-link class="Right-Left" icon="el-icon-search "
          >C# 加解密工具类
        </el-link>
      </div>
      <div class="information">
        <el-button icon="el-icon-search" size="mini" type="info"
          >API文档
        </el-button>
      </div>
      <div class="Left-kin">
        所有支付订单有效期为3分钟！例如：2022-01-01 16:00:00下单
      </div>
      <div class="Left-kin-One">
        • 如果在2022-01-01
        16:03:00之前去正确请求手机网站接口是不会有任何报错的，可以正常支付。
      </div>
      <div class="Left-kin-One">
        • 如果在2022-01-01
        16:03:00之后请求支付宝，唤起支付页面或者支付宝APP会报错：订单参数异常，请重新下单后再发起付款。
      </div>
      <div class="Left-kin-One">
        • 如果在2022-01-01
        16:03:00之前去请求支付宝，唤起了支付页面或者支付宝APP后，先不支付，直到超过后去支付也会报错：订单已超时，不能付款。
      </div>
    </div>
    <!--弹窗-->
    <el-dialog
      :before-close="handleClose"
      :title="
        Idx === 1
          ? 'APIKEY'
          : Idx === 2
          ? 'RSA'
          : Idx === 3
          ? '公私钥生成'
          : Idx === 4
          ? '修改登录密码'
          : '修改认证密码'
      "
      :visible.sync="dialogVisible"
      width="600px"
    >
      <apiKeyPopup v-if="Idx === 1"></apiKeyPopup>
      <rsaPopup v-if="Idx === 2"></rsaPopup>
      <publicKeyPopup v-if="Idx === 3"></publicKeyPopup>
      <loginPasswordPopup
        v-if="Idx === 4"
        @passWord="passWord"
      ></loginPasswordPopup>
      <authenticatePasswordPopup
        v-if="Idx === 5"
        @autoPassWord="autoPassWord"
      ></authenticatePasswordPopup>
    </el-dialog>
  </div>
</template>
<script>
import apiKeyPopup from "@/components/merchantCenter/apiKeyPopup/apiKeyPopup.vue";
import rsaPopup from "@/components/merchantCenter/rsaPopup/rsaPopup.vue";
import publicKeyPopup from "@/components/merchantCenter/publicKeyPopup/publicKeyPopup.vue";
import loginPasswordPopup from "@/components/merchantCenter/loginPasswordPopup/loginPasswordPopup.vue";
import authenticatePasswordPopup from "@/components/merchantCenter/authenticatePasswordPopup/authenticatePasswordPopup.vue";
import { homtMy } from "@/assets/js/homePage";

export default {
  components: {
    apiKeyPopup,
    rsaPopup,
    publicKeyPopup,
    loginPasswordPopup,
    authenticatePasswordPopup,
  },
  data() {
    return {
      Idx: 0,
      dialogVisible: false,
      behalf: "4",
      Signing: "1",
      radio: "1",
      authentication: "1",
      from: {
        name: "",
        ipDay: "",
        time: "",
        merchant: "",
        merchantId: "",
        contacts: "",
        idNum: "",
        phone: "",
        address: "",
        textarea: "",
      },
    };
  },
  mounted() {
    this.mYhomt();
  },
  methods: {
    async mYhomt() {
      let res = await homtMy("");
      if (res.code === 200) {
        this.from.name = res.data.data.merchantsLogin.loginIp;
        this.from.time = res.data.data.merchantsLogin.createdTime;
        this.from.merchant = res.data.data.merchants.account;
        this.from.merchantId = res.data.data.merchants.uid;
        this.from.contacts = res.data.data.merchants.merchantsName;
        this.from.idNum = res.data.data.merchants.cardNumber;
        this.from.phone = res.data.data.merchants.merchantsPhone;
        this.from.address = res.data.data.merchants.address;
        let Tl = res.data.data.merchantsLogin.ipAddress.split("|")[0];
        if (Tl === "内网IP") {
          this.from.ipDay = Tl;
        } else {
          let arres = null;
          let resArr = res.data.data.merchantsLogin.ipAddress.split("|");
          resArr.splice(0, 1);
          if (resArr[resArr.length - 1] !== " ") {
            // 最后一个元素不是空格，添加一个空格
            const lastIndex = resArr.length - 1;
            const newArray = [...resArr];
            newArray.splice(lastIndex, 0, "   ");
            arres = newArray;
          }
          for (let i = 0; i < arres.length; i++) {
            this.from.ipDay += arres[i];
          }
        }
        //radio账户状态
        let redNum = res.data.data.merchants.accountStatus;
        let resNum = redNum === "NORMAL" ? "1" : "2";
        this.radio = resNum;
        //authentication认证状态
        let autNum = res.data.data.merchants.authStatus;
        let autoNum =
          autNum === "INIT" ? "1" : autNum === "THROUGH" ? "2" : "3";
        this.authentication = autoNum;
        //Signing收款签约
        let SignNum = res.data.data.merchants.collectionStatus;
        let autoNumTwo =
          SignNum === "INIT" ? "1" : SignNum === "THROUGH" ? "2" : "3";
        this.Signing = autoNumTwo;
      }
    },
    open(e) {
      this.Idx = e;
      this.dialogVisible = true;
    },
    //认证密码
    authenTicAtion(e) {
      this.Idx = e;
      this.dialogVisible = true;
    },
    //隐藏
    handleClose(done) {
      done();
    },
    //关闭弹窗
    passWord(e) {
      this.dialogVisible = e;
    },
    //关闭弹窗
    autoPassWord(e) {
      this.dialogVisible = e;
    },
    //查看APIkey
    apiClick(e) {
      this.Idx = e;
      this.dialogVisible = true;
    },
  },
};
</script>
<style scoped>
.Left-kin {
  width: 450px;
  height: 35px;
  font-weight: bold;
  font-size: 14px;
  margin-left: 15px;
  margin-top: 30px;
}

.Left-kin-One {
  width: 960px;
  height: 35px;
  font-weight: bold;
  font-size: 14px;
  margin-left: 15px;
}

.information {
  margin-left: 15px;
  margin-top: 15px;
}

.Right-Left {
  margin-left: 10px;
}

.mok-Left {
  margin-left: 15px;
}

.userNmae {
  padding: 10px 15px;
}

.body {
  background: #eeeeee;
}

.head-Top {
  background: #ffffff;
  height: 96%;
}

.head-Top-Oen {
  width: 270px;
  height: 35px;
  margin-left: 15px;
  margin-top: 10px;
  display: inline-block;
}

.head-Top-Oen-1 {
  height: 50px;
  margin-left: 15px;
  margin-top: 10px;
}

.Size {
  font-size: 15px;
  width: 75px;
  height: 100%;
  display: inline-block;
}

.Size-One {
  font-size: 15px;
  width: 90px;
  height: 100%;
}

.ipLink {
  width: 195px;
}

.head-header {
  display: inline-block;
}

.cheCk {
  width: 700px;
  height: 40px;
  margin-left: 15px;
  margin-top: 20px;
}

.white-list {
  margin-top: 35px;
  margin-left: 15px;
}

.white-list-top {
  width: 75px;
  font-size: 15px;
}

.From {
  font-weight: bold;
  font-size: 14px;
}

.DOMri {
  width: 600px;
  height: 25px;
  margin-left: 15px;
}
</style>
